<template>
  <div class="home">
    <el-container>
      <!-- 左边内容 -->
      <el-aside width="auto">
        <div class="logo"></div>
        <el-menu
          default-active="2"
          router
          background-color="#F9F9F9"
          :collapse="iscollapse"
          class="el-menu-admin"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu :index="item.path" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.authName}}</span>
            </template>
            <el-menu-item :index="c.path" v-for="c in item.children" :key="c.id">
              <i class="el-icon-menu"></i>
              <span slot="title">{{c.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右边内容 -->
      <el-container>
        <el-header>
          <i class="myicon myicon-menu toggle-btn" @click="toggle"></i>
          <span class="system-title">电商后台管理系统</span>
          <div>
            <span class="welcome">欢迎您 {{username}}</span>
            <el-button type="warning" round @click="handleLogout">退出</el-button>
          </div>
        </el-header>
        <el-main>
          <transition
            mode="out-in"
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
          >
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getMenus } from '@/api'
export default {
  data () {
    return {
      iscollapse: false,
      username: '',
      menuList: []
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    toggle () {
      this.iscollapse = !this.iscollapse
    },
    handleLogout () {
      localStorage.clear()
      // 跳转:
      this.$router.push({ name: 'login' })
    }
  },
  mounted () {
    this.username = localStorage.getItem('username')
    getMenus()
      .then(res => {
        this.menuList = res.data
      })
  }
}
</script>
<style lang="scss" scoped>
  @import "@/assets/css/index.scss";
</style>
